;(function(){
    function Expand(id){
        this.expand=document.getElementById(id);
        this.smallbox=this.expand.children[0];
        this.floatbox=this.smallbox.children[1];
        this.bigbox=this.expand.children[1];
        this.bigimg=this.bigbox.children[0];

        this.init();
        
    }

    Expand.prototype={
        init:function(){
            var that=this;
            this.smallbox.onmouseenter=function(){
                that.imgblock();
            }
            this.smallbox.onmouseleave=function(){
                that.imgnone();
            }
            this.smallbox.onmousemove=function(event){
                that.move(event);
            }
        },
        imgblock:function(){
            this.floatbox.style.display="block";
            this.bigbox.style.display="block";
        },
        imgnone:function(){
            this.floatbox.style.display="none";
            this.bigbox.style.display="none";
        },
        move:function(event){
            var e=event||window.event;
            var left=e.clientX-this.smallbox.offsetLeft-this.floatbox.offsetWidth/2;
            var top=e.clientY-this.smallbox.offsetTop-this.floatbox.offsetHeight/2;
            if(left<0){
                left=0
            }else if(left>this.smallbox.offsetWidth-this.floatbox.offsetWidth){
                left=this.smallbox.offsetWidth-this.floatbox.offsetWidth;
            }
            if(top<0){
                top=0
            }else if(top>this.smallbox.offsetHeight-this.floatbox.offsetHeight){
                top=this.smallbox.offsetHeight-this.floatbox.offsetHeight
            }
            this.floatbox.style.left=left+"px";
            this.floatbox.style.top=top+"px";
           
            this.bigimg.style.left=-left/this.smallbox.offsetWidth*this.bigimg.offsetWidth+"px";
            this.bigimg.style.top=-top/this.smallbox.offsetHeight*this.bigimg.offsetHeight+"px";
        }

    }

    window.$=Expand;
    

})();

var exp=new $("expand");
